import {
  BrowserRouter as Router,
  Routes,
  Route,
  NavLink
} from "react-router-dom"
import Footer from './components/Footer'
import Header from './components/Header'
import List from './page/List'
import Index from './page/Index'
import Search from './page/Search'
import ShopCart from './page/ShopCart'
import LowCode from './page/LowCode'

const arr = [
  { txt: '低代码', to: '/low-code' },
  { txt: '购物车', to: '/shop-cart' },
  { txt: '首页', to: '/' },
  { txt: '列表', to: '/list' },
  { txt: '搜索', to: '/search' },
]
const list = arr.map((item, index) => {
  if (item.to === '/') {
    return <NavLink exact="true" to="/" key={index}><span>首页</span></NavLink>
  } else {
    return <NavLink to={item.to} key={index}><span>{item.txt}</span></NavLink>
  }
})

function App() {
  return (
    <div className="App">
      <Router>
        <Header />
        <Footer name={list} />
        <Routes>
          <Route path="/" exact="true" element={<Index />} />
          <Route path="/list" element={<List />} />
          <Route path="/shop-cart" element={<ShopCart />} />
          <Route path="/search" element={<Search />} />
          <Route path="/low-code" element={<LowCode />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App
